<template>
  <div class="containter-box">
    <!-- 筛选表单 -->
    <div class="filter-form">
      <el-form label-width="80px" :inline="true" size="small">
        <el-form-item label="学科名称">
          <el-input
            v-model="queryData.subject_name"
            placeholder="学科名称"
          ></el-input>
        </el-form-item>
        <!-- <SelectState /> -->
        <el-form-item label="归属学科">
          <template>
            <!-- 下拉框组件 -->
            <select-directory
              ref="SelectDirectory"
              v-model="queryData.directory_name"
            ></select-directory>
          </template>
        </el-form-item>
        <el-form-item>
          <template>
            <el-select
              size="small"
              v-model="queryData.is_show"
              placeholder="显示状态"
            >
              <el-option label="显示" :value="1" />
              <el-option label="隐藏" :value="2" />
            </el-select>
          </template>
        </el-form-item>
        &nbsp;
        <el-form-item>
          <el-button
            icon="el-icon-search"
            type="primary"
            @click="onSubmit"
            plain
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" @click="onSearchReset"
            >重置</el-button
          >
        </el-form-item>

        <el-form-item class="creat-xk">
          <el-row type="flex">
            <el-button
              type="primary"
              icon="el-icon-plus"
              plain
              @click="$refs.directoryPop.dialogShow = true"
              >创建学科</el-button
            >
          </el-row>
        </el-form-item>
      </el-form>
    </div>
    <!-- 操作区域 -->
    <!-- <div class="tool-bar"></div> -->
    <!-- 表单区域 -->
    <div class="table-box">
      <el-table :data="list" border stripe>
        <el-table-column align="center" type="index" label="序号" />
        <el-table-column align="center" prop="id" label="目录ID" />
        <el-table-column prop="directory_name" label="目录名称" />
        <!-- 表格个性化渲染 -->
        <el-table-column align="center" prop="directory_icon" label="目录图标">
          <template slot-scope="{ row }">
            <!-- {{ row }} -->
            <div class="subject_img" style="margin-left: 80px">
              <img
                :src="`http://124.223.14.236:7005/${row.directory_icon}`"
                alt=""
                class="image__inner"
              />
            </div>
            <!-- <image>{{  }}</image> -->
            <!-- <img :src="row.subject_icon" alt="" /> -->
          </template>
        </el-table-column>
        <el-table-column align="center" prop="username" label="创建人" />
        <el-table-column align="center" prop="is_show" label="是否显示">
          <template slot-scope="{ row }">
            <el-switch
              v-model="row.is_show"
              active-text="是"
              inactive-text="否"
              :active-value="1"
              :inactive-value="2"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="tag_num" label="标签数量" />
        <el-table-column align="center" label="操作">
          <template slot-scope="{ row }">
            <!-- 修改 slot-scope="{ row }"   @click="editSubject(row.id)" -->
            <el-button
              @click="$refs.directoryPop.showdirectory(row.id)"
              size="small"
              type="primary"
              icon="el-icon-edit"
              circle
            ></el-button>
            &nbsp;
            <!-- 删除  @confirm="deleteSubject(row.id)" -->
            <el-popconfirm
              @confirm="deldirectory(row.id)"
              title="这是一段内容确定删除吗？"
            >
              <el-button
                slot="reference"
                size="small"
                type="danger"
                icon="el-icon-delete"
                circle
              ></el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页区域 -->
    <div class="page">
      <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page.sync="queryData.page"
        :page-sizes="[4, 10, 20, 30]"
        :page-size="queryData.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :pager-count="7"
        background
      >
      </el-pagination>
    </div>
    <!-- 弹框 -->
    <directory-pop ref="directoryPop" @updateList="initData"></directory-pop>
  </div>
</template>

<script>
import { getdirectoryListApi, deletedirectoryApi } from '@/api/directory'
import directoryPop from '../components/directory-pop.vue'
import SelectDirectory from '../components/select-directory.vue'


export default {
  components: { directoryPop, SelectDirectory },
  name: 'Subject',

  data() {
    return {
      // 表格数据
      list: [],
      // 查询参数
      queryData: {
        subject_id: '',
        subject_name: '',
        directory_name: '',
        is_show: '',
        page: 1,
        limit: 4
      },
      // 总数
      total: 0,
      // =======================================================


    }
  },

  created() {
    this.initData()
  },
  methods: {
    // 初始化数据
    async initData() {
      // 1.调用API函数,获取表格数据
      let res = await getdirectoryListApi(this.queryData)
      console.log(res);
      // 2.数据加工处理(非必须操作)
      // 3.赋值变量
      this.list = res.list
      this.total = res.total
    },
    // 筛选提交
    onSubmit() {
      this.queryData.page = 1
      this.initData()
    },
    //筛选表单 重置
    onSearchReset() {
      this.queryData = {
        subject_name: '',
        is_show: '',
        page: 1,
        limit: 10
      }
      this.initData()
    },
    // sizeChange每页数量切换事件
    sizeChange(val) {
      console.log(val);
      this.queryData.limit = val
      this.initData()
    },
    //currentChange 页码切换事件
    currentChange(val) {
      console.log(val);
      this.queryData.page = val
      this.initData()
    },
    // ======================================
    // 删除
    async deldirectory(id) {
      // 发送删除请求
      await deletedirectoryApi(id)
      // 提示成功
      this.$message.success('删除成功')
      // 边缘问题：如果不是第一页并且删除成功，页码-1在拉取列表
      if (this.queryData.page > 1 && this.list.length === 1) {
        this.queryData.page--
      }
      // 重新拉取列表
      this.initData()
    }
  }
}
</script>

<style  scoped>
.containter-box {
  padding: 30px;
}
.creat-xk {
  float: right;
}
.filter-form,
.tool-bar {
  border: 1px solid #eee;
  padding: 10px;
  margin-bottom: 10px;
}
.subject_img {
  height: 40px;
  width: 40px;
}
.image__inner {
  width: 100%;
  height: 100%;
}
/* 上传 */
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>>
